<template>
	<view class="login_wp">
		<view class="con">
			<view class="logo">
				<image src="../../static/images/logo.png" mode="widthFix" />
			</view>
			<view class="wp">
				<view class="fill">
					<view class="tit">
						<view class="span" @click="ChangType(1)" :class="type==1?'on':''">商户登录<view class="em"
								v-if="type==1"></view>
						</view>

						<view class="span" @click="ChangType(2)" :class="type==2?'on':''">用户登录<view class="em"
								v-if="type==2"></view>
						</view>

						<!-- <navigator url="/pages/register/register" hover-class="none" open-type="redirectTo">
							<view class="span ">用户登录</view>
						</navigator> -->
					</view>
					<view class="fill_input">
						<view class="item">
							<input type="text" v-model="phone" placeholder="请输入手机号" />
						</view>
						<view class="item">
							<input type="password" v-model="password" placeholder="请输入密码" />
						</view>

						<view class="item item2" @click="SubMit()">
							<button>登录</button>
						</view>

						<!-- <view class="txt">忘记密码？</view> -->

						<!-- <view class="chose">
							<view class="icon" v-if="agree==1">
								<image src="../../static/images/c_i11.png" mode="widthFix" />
							</view>
							<view class="icon" v-if="agree==0">
								<image src="../../static/images/my16.png" mode="widthFix" />
							</view>
							<text>同意</text>
							<navigator url="" hover-class="none">《用户协议》</navigator>
							<text>和</text>
							<navigator url="" hover-class="none">《隐私权政策》</navigator>
						</view> -->
						<navigator url="/pages/login/one" hover-class="none" v-if="type==2">
							<div class="btn2">没有账号，第一次登录 ></div>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 2,
				phone: '',
				password: '',
				agree:1,
			}
		},
		onLoad() {
			let that = this;

		},
		methods: {
			ChangType: function(num) {
				this.type = num;
			},

			SubMit: function() {
				let that = this;
				if (that.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
						duration: 2000
					});
				} else if (that.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入密码',
						duration: 2000
					});
				} else {
					var _data = {
						guard: that.type == 2 ? 'user' : 'merchant',
						phone: that.phone,
						password: that.password,
						agree: that.agree,
					}
					if(that.common.GetStorage('byopenid')){
						_data.openid = that.common.GetStorage('byopenid');
					}					
					uni.showLoading({
						title: '登录中...',
						mask: true
					});
					that.common.http('POST', 'login', _data, function(res) {
						uni.hideLoading();
						uni.showToast({
							icon: 'none',
							title: '登录成功',
							duration: 2000
						});
						uni.setStorage({
							key: 'byh5token',
							data: res.data.token,
							success: function() {
								console.log('success');
							}
						});
						uni.setStorage({
							key: 'byh5type',
							data: that.type,
							success: function() {
								console.log('success');
							}
						});
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/index/index',
							})
						}, 1500);
					});
				}
			},
		}
	}
</script>

<style scoped>
	.login_wp {
		background: linear-gradient(to bottom, #dcf3fd, #f7f7f7);
	}

	.login_wp .con {
		padding-top: 30rpx;
	}

	.login_wp .con .logo {
		text-align: center;
	}

	.login_wp .con .logo image {
		width: 70%;
	}

	.fill {
		background-color: #fff;
		margin-top: 70rpx;
		border-radius: 8px;
		box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		padding-bottom: 80rpx;
		padding-top: 30rpx;
	}

	.tit {
		height: 78rpx;
		line-height: 78rpx;
		display: flex;
		justify-content: space-between;
	}

	.tit navigator {
		display: inline;
		width: 50%;
	}

	.tit navigator .span {
		width: 100%;
	}

	.tit .span {
		width: 50%;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		cursor: pointer;
		position: relative;
	}

	.tit .span.on {
		background-color: #fff;
		font-size: 30rpx;
		color: #222222;
	}

	.tit .span .em {
		position: absolute;
		width: 40rpx;
		height: 8rpx;
		border-radius: 5px;
		background-color: #227fff;
		left: 50%;
		bottom: 0;
		margin-left: -20rpx;
	}

	.fill_input {
		padding: 0 64rpx;
	}

	.fill_input {
		margin-top: 80rpx;
	}

	.fill_input input {
		height: 88rpx;
		background-color: #f2f2f2;
		border-radius: 50px;
		font-size: 32rpx;
		padding: 0 50rpx;
	}

	.fill_input .item {
		margin-top: 20rpx;
	}

	.fill_input button {
		border-radius: 50px;
		background-color: #227fff;
		width: 100%;
		font-size: 32rpx;
		color: #fff;
		font-weight: normal;
	}

	.fill_input .item.item2 {
		margin-top: 50rpx;
	}

	.txt {
		text-align: center;
		margin-top: 46rpx;
		font-size: 28rpx;
		color: #333;
	}

	.chose {
		margin-top: 50rpx;
		text-align: center;
	}

	.chose .icon {
		display: inline-block;
		width: 26rpx;
		height: 26rpx;
		vertical-align: middle;
		margin-right: 12rpx;
	}

	.chose .icon image {
		width: 100%;
		vertical-align: top;
	}

	.chose navigator {
		display: inline-block;
		font-size: 20rpx;
		color: #f34242;
	}

	.chose text {
		display: inline-block;
		font-size: 20rpx;
		color: #999;
		vertical-align: middle;
	}

	.btn2 {
		font-size: 26rpx;
		color: #227fff;
		text-align: center;
		border: 1px solid #227fff;
		border-radius: 50px;
		height: 82rpx;
		line-height: 80rpx;
		margin-top: 80rpx;
	}
</style>